<template>
    <div class="fillcontain">
        <el-form :model="formData" :rules="rules" inline="true" ref="formData"
                 class="demo-form-inline" style="margin-left: 20px">
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" @change="schoolchange" style="width: 220px" v-model="formData.schoolid"
                               placeholder="请选择校区">
                        <el-option
                            v-for="item in schoolList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" v-model="formData.eid" placeholder="所属老师">
                        <el-option
                            v-for="item in empsList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-date-picker
                        size="mini"
                        v-model="formData.month"
                        type="month"
                        placeholder="选择月">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col>
            <el-button type="primary" @click="this.initData" size="mini" icon="el-icon-search">搜索</el-button>
            </el-col>
        </el-form>
        <div class="table_container">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%">
                <el-table-column
                    property="ename"
                    label="姓名"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="month"
                    label="日期"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="schoolname"
                    label="所属校区"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="operatorname"
                    label="经办人"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="onclassuser"
                    label="当月上课人数"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="totaluser"
                    label="平均总人数"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="attendanceRate"
                    label="本月比例"
                    min-width="10%">
                </el-table-column>
            </el-table>

        </div>
    </div>

</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import {getUserList, getUserCount,employMonthList} from '@/api/getData'
    import ElCol from "element-ui/packages/col/src/col";
    export default {
        computed: {
            ...mapGetters(['yearsList', 'adminInfo', 'monthsList', 'weeksList', 'schoolList', 'channelList', 'periodList', 'empschoolMap', 'sexList', 'paytypeList', 'subjectList', 'cardList'])
        },
        data(){
            return {
                empsList:null,
                formData:{},
                tableData: [],
                currentRow: null,
                offset: 0,
                limit: 20,
                count: 0,
                currentPage: 1,
            }
        },
        components: {
            ElCol,
            headTop,
        },
        created(){
            this.initData();
        },
        mounted() {
            if (this.periodList == null) {
                this.getPeriod();
            }
            if (this.empschoolMap == null) {
                this.fillSchoolEmps();
            }
            if (this.schoolList == null) {
                this.getAllSchool();
            }
        },
        methods: {
            ...mapActions(['getGiftList','getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool']),

            schoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.empsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.empsList.push(item);
                    });
                }
            },
            async initData() {
                const v = await employMonthList({"data": this.formData});
                if (v.success == true) {
                    const studList = v.data;
                    this.tableData = [];
                    studList.forEach(item => {
                        const td = {};
                        td.ename = item.ename;
                        td.schoolname = item.schoolname;
                        td.month=item.month;
                        td.operatorname = item.operatorname;
                        td.totaluser = item.totaluser;
                        td.onclassuser = item.onclassuser;
                        td.attendanceRate = item.attendanceRate;
                        this.tableData.push(td);
                    })
                }
            }


        },
    }
</script>

<style lang="less">
    @import '../style/mixin';
    .table_container{
        padding: 20px;
    }
</style>
